<script setup lang="ts">
import {computed} from "vue";
import {useRoute} from "vue-router";
const list = [
  {
    path:"/index",
    name:"index",
    label:"首页",
    icon: "HomeFilled",

  },
  {
    path: '/user',
    icon: 'Promotion',
    label: '用户管理',
    children: [
      {
        path: '/user/tenants',
        name: 'tenants',
        label: '已入住用户',
        icon: 'User',
      },
      {
        path: '/user/reservations',
        name: 'reservations',
        label: '预约用户',
        icon: 'Calendar',
      },
      {
        path: '/user/behavior',
        name: 'behavior',
        label: '用户行为分析',
        icon: 'DataAnalysis',
      },
      {
        path: '/user/activity',
        name: 'activity',
        label: '活跃度统计',
        icon: 'TrendCharts',
      },
    ]
  },

  {
    path:"/house/list",
    name:"house",
    label:"房源管理",
    icon: "House",
    children:[
      {
        path:"/house/list/list",
        name:"list",
        label:"房屋表单",
        icon: "List",
      },
      {
        path:"/house/3d",
        name:"house3d",
        label:"3D看房",
        icon: "VideoCamera",
      },
      {
        path:"/house/detail",
        name:"househu",
        label:"户型",
        icon: "House",
      }
    ]
  },
  {
    path:"/trade",
    name:"trade",
    icon:'DataAnalysis',  // 修改为Element Plus提供的标准图标
    label:"交易管理",
    children:[

        {
        path:"/trade/transactiondata",
        name:"transactiondata",
        label:"购房申请",
        icon: "UserFilled",
      },
      {
        path:"/trade/people",
        name:"people",
        label:"合同签约",
        icon: "Document",
      }

    ]
  },

  {
    path:"/money",
    name:"money",
    icon:'Money',  // 修改为Element Plus提供的标准图标
    label:"财务管理",
    children:[

      {
        path:"/money/income",
        name:"income",

        label:"收支记录",
        icon: "money",
      },
      {
        path:"/money/chart",
        name:"chart",
        label:"数据看板",
        icon: "pie-chart",
      }

    ]
  },
  {
    path: "/afterSale",
    icon: "Shop",
    label: "售后服务",
    children: [
      {
        path: "/afterSale/repair",
        name: "houseRepair",
        label: "房屋维修",
        icon: "Tools",
      },
      {
        path: "/afterSale/transaction",
        name: "customerTransaction",
        label: "客户缴费",
        icon: "Money",
      },
      {
        path: "/afterSale/check",
        name: "afterSaleCheck",
        label: "检查相关",
        icon: "Check", //
      },
      {
        path: "/afterSale/contract",
        name: "afterSaleContract",
        label: "续约管理",
        icon: "Document", //
      }

    ]
  },
  {
    path:"/userInfo",
    icon: "UserFilled",
    label: "个人中心",
    children:[
      {
        path:"/user/info",
        name:"userinfo",
        label:"基本资料",
        icon: "user",
      },
      {
        path:"/user/resetPassword",
        name:"resetPassword",
        label:"重置密码",
        icon: "EditPen",
      }
    ]
  },

];
const noChildren = ()=>{
  return list.filter(item=>!item.children)
}
const hasChildren = ()=>{
  return list.filter(item => item.children)
}
const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>

<template>
  <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu active-text-color="#121111FF" background-color="#b5c88e" text-color="#121111FF"
             router :default-active="activeMenu">
      <el-menu-item  :index="item.path" v-for="item in noChildren()" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  background: #b5c88e;

  &__logo {
    height: 120px;
    background: url('../assets/login_title.png') no-repeat center / 120px auto;
  }

  .el-menu {
    border-right:none;
  }
  .icons{
    margin-right: 8px;
    width: 16px;
    height: 15px;
  }
}
</style>